<template>
  <Com class="jimu-menu">
    <!-- <slot></slot> -->
    <!-- <MenuItem v-for="(item, index) in menus" :key="index" :label="item.label" to="/">
    </MenuItem> -->
    <el-menu
      class="el-menu-vertical-demo"
      :default-active="activeMenu"
      @select="onMenuSelect"
    >
    <template v-for="(item, index) in menus">
      <el-sub-menu v-if="item.children && item.children.length > 0" :key="index+'1'" :index="index+''">
        <template #title>
          <i v-show="item.icon" :class="item.icon||'el-icon-menu'"></i>
          <span>{{item.label}}</span>
        </template>
        <el-menu-item v-for="(subItem, j) in item.children" :key="j" :index="index+'-'+j" >
          {{subItem.label}}
          <!-- <router-link :to="subItem.to">{{subItem.label}}</router-link> -->
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="index+''" :key="index">
        {{item.label}}
        <!-- <router-link :to="item.to">{{item.label}}</router-link> -->
      </el-menu-item>
    </template>
    </el-menu>
  </Com>
</template>

<script lang="ts">
import {defineComponent, toRefs, ref, watch} from 'vue'
import Com from '../../common/Com.vue'
import MenuItem from './MenuItem.vue'
import { useRoute, onBeforeRouteUpdate, useRouter } from 'vue-router';
export default defineComponent({
  name: 'JimuMenu',
  components: {Com, MenuItem},
  props:{
    menus: {
      type: Array,
      default(){
        return [{
          'label': '123',
          to: {name: 'Home'},
        }]
      }
    }
  },
  setup(props:any){
    let activeMenu = ref('0')
    const route = useRoute()
    const router = useRouter()

    const {menus} = toRefs(props.menus)

    const loopMenu = (to:any, loopmenus:any, preIndex:string) => {
      for(let i = 0; i< loopmenus.length; i++){
        const item = loopmenus[i];

        if(item.to){
          if((item.to.name && item.to.name === to.name) || (item.to.path && item.to.path === to.path)){
            activeMenu.value = preIndex + i + '';
            break;
          }
        }else if(item.children && item.children.length > 0){
          loopMenu(to, item.children, i+'-');
        }else if(item.name && item.name === to.name){
          activeMenu.value = preIndex + i + ''
          break;
        }
      }
      
    }

    watch(()=>menus, (val)=>{
      console.log('menus chage')
      loopMenu(route, menus, '');
    })

    
    

    onBeforeRouteUpdate((to) => {
      loopMenu(to, props.menus, '');
    })

    
    
    // menus.forEach((item, index) => {
    //   console.log(item, index, route.name, route.path)
    //   if(item.to){
    //     if((item.to.name && item.to.name === route.name) || (item.to.path && item.to.path === route.path)){
    //       console.log('on if')
    //       activeMenu = index + '';
    //     }
    //   }
    // });

    const onMenuSelect = (index:string)=>{
      const indexArr = index.split('-')
      console.log(indexArr, props.menus)
      let m:any = null;
      indexArr.forEach((arrItem, i) => {
        if(i === 0){
          m = props.menus[parseInt(arrItem)]
        }else{
          m = m.children[parseInt(arrItem)]
        }
      });

      router.push(m.to)
    }

    return {
      activeMenu,
      onMenuSelect
    }
  }
})
</script>

<style lang="scss" scoped>
.jimu-menu{
  width: 200px;
  // height: 100%;
  position: fixed;
  z-index: 801;
  top: 50px;
  left: 50px;
  bottom: 0;

  &::after{
    content:"";
    height:0px;
    width:0px;
    clear:both;
    display:block;
    overflow: hidden;
  }

  .el-menu-vertical-demo{
    height: 100%;
  }
  .el-menu-item a{
    text-decoration: none;
    color: #303133;
  }
  :deep(.el-menu-item.is-active a){
    color: #409eff;
  }
}
</style>